<script setup lang="ts">
import { computed, ref, onUnmounted } from 'vue'
import type { Milestone } from '../models/classes/Milestone'

interface Props {
  date: string // 里程碑日期
  rowHeight: number
  dayWidth: number
  startDate: Date
  name?: string
  milestone?: Milestone // 完整的里程碑数据
  // 新增：用于边界粘性显示的滚动位置信息
  scrollLeft?: number
  containerWidth?: number
  // 新增：里程碑推挤效果所需的信息
  milestoneId?: string | number // 唯一标识符
  otherMilestones?: Array<{
    id: string | number
    left: number
    originalLeft: number // 原始位置（不考虑停靠）
    isSticky: boolean
    stickyPosition: 'left' | 'right' | 'none'
    priority: number // 推挤优先级
  }> // 其他里程碑的位置信息
}

const props = defineProps<Props>()

// 添加事件定义
const emit = defineEmits<{
  'milestone-double-click': [milestone: Milestone]
  'update:milestone': [milestone: Milestone] // 新增里程碑更新事件
  'drag-end': [milestone: Milestone] // 新增
}>()

// 拖拽相关状态
const isDragging = ref(false)
const dragStartX = ref(0)
const dragStartLeft = ref(0)
const tempMilestoneData = ref<{ startDate?: string } | null>(null)

// 双击事件处理
const handleDoubleClick = (e: MouseEvent) => {
  // 阻止事件冒泡和默认行为
  e.preventDefault()
  e.stopPropagation()

  // 如果是停靠状态或被推出边界，禁止双击编辑
  if (
    milestoneVisibility.value.isSticky ||
    milestoneVisibility.value.isPushedOut ||
    !milestoneVisibility.value.showIcon
  ) {
    return
  }

  // 清理任何可能残留的拖拽状态
  isDragging.value = false
  tempMilestoneData.value = null

  // 移除可能残留的事件监听器
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)

  if (props.milestone) {
    emit('milestone-double-click', props.milestone)
  } else {
    // 如果没有完整数据，构造基本的里程碑对象
    const basicMilestone: Milestone = {
      name: props.name || '里程碑',
      startDate: props.date,
      type: 'milestone',
    }
    emit('milestone-double-click', basicMilestone)
  }
}

// 日期工具函数
const addDaysToLocalDate = (date: Date, days: number): Date => {
  const result = new Date(date)
  result.setDate(result.getDate() + days)
  return result
}

const formatDateToLocalString = (date: Date): string => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 拖拽事件处理
const handleMouseDown = (e: MouseEvent) => {
  // 如果是停靠状态或被推出边界，禁止拖拽
  if (
    milestoneVisibility.value.isSticky ||
    milestoneVisibility.value.isPushedOut ||
    !milestoneVisibility.value.showIcon
  ) {
    return
  }

  // 如果正在双击过程中，不启动拖拽
  e.preventDefault()
  e.stopPropagation()

  // 设置拖拽状态，但不立即开始拖拽
  dragStartX.value = e.clientX
  dragStartLeft.value = parseInt(milestoneStyle.value.left)
  tempMilestoneData.value = null

  // 添加全局事件监听器
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

const handleMouseMove = (e: MouseEvent) => {
  const deltaX = e.clientX - dragStartX.value

  // 只有在真正移动了一定距离后才开始拖拽（避免意外触发）
  if (Math.abs(deltaX) > 3) {
    isDragging.value = true

    const newLeft = Math.max(0, dragStartLeft.value + deltaX)
    const newStartDate = addDaysToLocalDate(props.startDate, newLeft / props.dayWidth)

    // 只更新临时数据，不触发事件
    tempMilestoneData.value = {
      startDate: formatDateToLocalString(newStartDate),
    }
  }
}

const handleMouseUp = () => {
  // 只有在真正拖拽了（有临时数据）且状态为拖拽中时才触发更新
  if (isDragging.value && tempMilestoneData.value && props.milestone) {
    const updatedMilestone = {
      ...props.milestone,
      ...tempMilestoneData.value,
    }
    emit('update:milestone', updatedMilestone)
    emit('drag-end', updatedMilestone)
  }

  // 重置所有拖拽状态
  isDragging.value = false
  tempMilestoneData.value = null

  // 移除事件监听器
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

// 单击事件处理 - 定位到里程碑位置（居中）
const handleMilestoneClick = (e: MouseEvent) => {
  // 阻止事件冒泡
  e.preventDefault()
  e.stopPropagation()

  // 如果正在拖拽，不响应单击
  if (isDragging.value) {
    return
  }

  // 如果里程碑被推出边界（完全隐藏），不响应点击
  if (milestoneVisibility.value.isPushedOut || !milestoneVisibility.value.showIcon) {
    return
  }

  // 如果里程碑完全在视野内，不需要定位
  if (milestoneVisibility.value.isFullyVisible) {
    return
  }

  const containerWidth = props.containerWidth || 0

  // 计算里程碑的原始位置（用户点击停靠里程碑是想定位到原始位置）
  const milestoneLeft = parseInt(milestoneStyle.value.left) + 12 // 图标中心位置

  if (containerWidth > 0) {
    // 计算需要滚动到的位置，让里程碑居中
    const targetScrollLeft = Math.max(0, milestoneLeft - containerWidth / 2)

    // 发送滚动定位事件
    window.dispatchEvent(
      new CustomEvent('milestone-click-locate', {
        detail: {
          scrollLeft: targetScrollLeft,
          smooth: true,
        },
      }),
    )
  }
}

// 计算菱形位置 - 考虑拖拽临时数据
const milestoneStyle = computed(() => {
  const milestoneDate = tempMilestoneData.value?.startDate
    ? new Date(tempMilestoneData.value.startDate)
    : new Date(props.date)

  // 修正：props.startDate 可能为 undefined，需防御性处理
  if (!props.startDate || isNaN(new Date(props.date).getTime())) {
    return {
      left: '0px',
      top: '0px',
      width: 'auto',
      height: 'auto',
    }
  }

  const startDiff = Math.floor(
    (milestoneDate.getTime() - props.startDate.getTime()) / (1000 * 60 * 60 * 24),
  )
  const size = Math.min(props.rowHeight, props.dayWidth * 1.2, 24)
  return {
    left: `${startDiff * props.dayWidth + props.dayWidth / 2 - size / 2}px`,
    top: `${(props.rowHeight - size) / 2}px`,
    width: 'auto',
    height: 'auto',
  }
})

// 里程碑统一使用红色配色
const milestoneColor = computed(() => {
  // 使用危险色（红色）统一里程碑配色
  return 'var(--gantt-danger, #f56c6c)'
})
const milestoneBorder = computed(() => {
  // 稍浅的红色作为边框
  return 'var(--gantt-danger-light, #fab6b6)'
})

// 计算里程碑图标类型
const milestoneIcon = computed(() => {
  return props.milestone?.icon || 'diamond' // 默认为菱形
})

// 计算里程碑的边界粘性显示状态（包含推挤效果）
const milestoneVisibility = computed(() => {
  const scrollLeft = props.scrollLeft || 0
  const containerWidth = props.containerWidth || 0

  // 如果没有有效的滚动信息，正常显示
  if (!containerWidth || containerWidth <= 0) {
    return {
      showIcon: true,
      showLabel: true,
      isSticky: false,
      stickyPosition: 'none',
      iconLeft: '0px',
      isPushedOut: false,
      clipPath: 'none',
      isFullyVisible: true, // 无滚动信息时认为完全可见
    }
  }

  // 获取当前里程碑的位置
  const milestoneLeft = parseInt(milestoneStyle.value.left) + 12 // 图标中心位置
  const leftBoundary = scrollLeft
  const rightBoundary = scrollLeft + containerWidth
  const iconSize = 24 // 图标大小
  const iconLeft = milestoneLeft - iconSize / 2
  const iconRight = milestoneLeft + iconSize / 2
  const currentId = props.milestoneId

  // 判断里程碑是否完全在视野内（左右边界都不碰到）
  const isFullyVisible = iconLeft >= leftBoundary && iconRight <= rightBoundary

  // 检查是否被其他里程碑推挤
  const otherMilestones = props.otherMilestones || []

  // 左侧边界逻辑
  if (iconRight <= leftBoundary + iconSize / 2) {
    // 检查左侧是否有其他停靠的里程碑，需要判断推挤优先级
    const leftStickyMilestones = otherMilestones.filter(
      m => m.id !== currentId && m.stickyPosition === 'left' && m.isSticky,
    )

    // 如果有其他里程碑已经停靠在左侧，比较优先级决定推挤顺序
    if (leftStickyMilestones.length > 0) {
      // 获取当前里程碑的原始位置（不考虑停靠）
      const currentOriginalLeft = parseInt(milestoneStyle.value.left) + 12

      // 检查是否有里程碑的原始位置比当前里程碑更靠右（即后来者推挤先来者）
      const hasLaterMilestone = leftStickyMilestones.some(m => {
        // 后来的里程碑（原始位置更靠右，数值更大）会推挤先来的人
        return m.originalLeft > currentOriginalLeft
      })

      if (hasLaterMilestone) {
        // 被后来的里程碑推出边界，完全隐藏
        return {
          showIcon: false,
          showLabel: false,
          isSticky: false,
          stickyPosition: 'none',
          iconLeft: '0px',
          isPushedOut: true,
          clipPath: 'none',
          isFullyVisible: false,
        }
      }
    }

    // 停靠在左边界，显示右半部分
    return {
      showIcon: true,
      showLabel: false,
      isSticky: true,
      stickyPosition: 'left',
      iconLeft: `${leftBoundary - parseInt(milestoneStyle.value.left) - iconSize / 2}px`,
      isPushedOut: false,
      clipPath: 'polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%)', // 只显示右半部分
      isFullyVisible: false,
    }
  }

  // 右侧边界逻辑
  if (iconLeft >= rightBoundary - iconSize / 2) {
    // 检查右侧是否有其他停靠的里程碑，需要判断推挤优先级
    const rightStickyMilestones = otherMilestones.filter(
      m => m.id !== currentId && m.stickyPosition === 'right' && m.isSticky,
    )

    // 如果有其他里程碑已经停靠在右侧，比较优先级决定推挤顺序
    if (rightStickyMilestones.length > 0) {
      // 获取当前里程碑的原始位置（不考虑停靠）
      const currentOriginalLeft = parseInt(milestoneStyle.value.left) + 12

      // 检查是否有里程碑的原始位置比当前里程碑更靠左（即后来者推挤先来者）
      const hasLaterMilestone = rightStickyMilestones.some(m => {
        // 后来的里程碑（原始位置更靠左，数值更小）会推挤先来的人
        return m.originalLeft < currentOriginalLeft
      })

      if (hasLaterMilestone) {
        // 被后来的里程碑推出边界，完全隐藏
        return {
          showIcon: false,
          showLabel: false,
          isSticky: false,
          stickyPosition: 'none',
          iconLeft: '0px',
          isPushedOut: true,
          clipPath: 'none',
          isFullyVisible: false,
        }
      }
    }

    // 停靠在右边界，显示左半部分
    return {
      showIcon: true,
      showLabel: false,
      isSticky: true,
      stickyPosition: 'right',
      iconLeft: `${rightBoundary - parseInt(milestoneStyle.value.left) - iconSize / 2}px`,
      isPushedOut: false,
      clipPath: 'polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%)', // 只显示左半部分
      isFullyVisible: false,
    }
  }

  // 图标在边界内，正常显示
  return {
    showIcon: true,
    showLabel: true,
    isSticky: false,
    stickyPosition: 'none',
    iconLeft: '0px',
    isPushedOut: false,
    clipPath: 'none',
    isFullyVisible,
  }
})

// Tooltip状态管理
const showTooltip = ref(false)
const tooltipPosition = ref({ x: 0, y: 0 })

// 处理里程碑悬停 - 只在停靠状态且显示图标时显示tooltip
const handleMilestoneMouseEnter = (event: MouseEvent) => {
  // 只有在停靠状态、显示图标且未被推出时才显示tooltip
  if (
    milestoneVisibility.value.isSticky &&
    milestoneVisibility.value.showIcon &&
    !milestoneVisibility.value.isPushedOut
  ) {
    showTooltip.value = true

    // 计算tooltip位置
    const rightOffset = !props.milestone || props.milestone?.icon === 'diamond' ? -300 : -270
    const offsetX = milestoneVisibility.value.stickyPosition === 'left' ? 10 : rightOffset // 左侧停靠在右侧显示，右侧停靠在左侧显示

    tooltipPosition.value = {
      x: event.clientX + offsetX,
      y: event.clientY - 10,
    }
  }
}

const handleMilestoneMouseLeave = () => {
  showTooltip.value = false
}

// 格式化日期显示
const formatDisplayDate = (dateStr: string): string => {
  if (!dateStr) return '未设置'

  try {
    const date = new Date(dateStr)
    if (isNaN(date.getTime())) return '未设置'

    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  } catch {
    return '未设置'
  }
}

// Tooltip内容
const tooltipContent = computed(() => {
  const milestoneName = props.name || props.milestone?.name || '里程碑'
  const targetDate = formatDisplayDate(props.date || props.milestone?.startDate || '')
  return `里程碑：${milestoneName} - 目标日期：${targetDate}`
})

// 组件销毁时清理事件监听器
onUnmounted(() => {
  // 清理拖拽状态
  isDragging.value = false
  tempMilestoneData.value = null

  // 移除事件监听器
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
})
</script>

<template>
  <div
    class="milestone"
    :style="milestoneStyle"
    :title="milestoneVisibility.isSticky ? '' : props.name || '里程碑'"
    :class="{
      dragging: isDragging,
      'milestone-sticky': milestoneVisibility.isSticky,
      'milestone-sticky-left': milestoneVisibility.stickyPosition === 'left',
      'milestone-sticky-right': milestoneVisibility.stickyPosition === 'right',
      'milestone-pushed-out': milestoneVisibility.isPushedOut,
    }"
    @click.stop="handleMilestoneClick"
  >
    <svg
      v-if="milestoneVisibility.showIcon"
      :width="24"
      :height="24"
      :viewBox="`0 0 24 24`"
      :style="{
        position: milestoneVisibility.isSticky ? 'relative' : 'static',
        left: milestoneVisibility.isSticky ? milestoneVisibility.iconLeft : '0px',
        clipPath: milestoneVisibility.clipPath,
        zIndex: milestoneVisibility.isSticky ? 200 : 120,
      }"
      style="cursor: pointer"
      @mouseenter="handleMilestoneMouseEnter"
      @mouseleave="handleMilestoneMouseLeave"
      @click.stop="handleMilestoneClick"
      @dblclick.stop="handleDoubleClick"
      @mousedown.stop="handleMouseDown"
    >
      <!-- 菱形图标 -->
      <g v-if="milestoneIcon === 'diamond'" transform="rotate(45 16 16)">
        <rect
          x="4"
          y="8"
          width="15"
          height="15"
          rx="6"
          ry="6"
          :fill="milestoneColor"
          :stroke="milestoneBorder"
          stroke-width="2"
        />
      </g>

      <!-- 火箭图标 -->
      <g v-else-if="milestoneIcon === 'rocket'">
        <foreignObject x="0" y="0" width="24" height="24">
          <div class="rocket-emoji">🚀</div>
        </foreignObject>
      </g>

      <!-- 默认菱形图标 -->
      <g v-else transform="rotate(45 16 16)">
        <rect
          x="4"
          y="8"
          width="15"
          height="15"
          rx="6"
          ry="6"
          :fill="milestoneColor"
          :stroke="milestoneBorder"
          stroke-width="2"
        />
      </g>
    </svg>
    <!-- 里程碑标签 - 只在非停靠状态显示 -->
    <span
      v-if="props.name && milestoneVisibility.showLabel"
      class="milestone-label milestone-label-right"
    >
      {{ props.name }}
    </span>
  </div>

  <!-- Tooltip 弹窗 - 只在停靠状态显示 -->
  <Teleport to="body">
    <div
      v-if="showTooltip && milestoneVisibility.isSticky"
      class="milestone-tooltip"
      :style="{
        left: `${tooltipPosition.x}px`,
        top: `${tooltipPosition.y}px`,
      }"
    >
      <div class="tooltip-content">
        {{ tooltipContent }}
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
@import '../styles/theme-variables.css';

.milestone {
  position: absolute;
  z-index: 120;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
}

/* 里程碑SVG发光效果 */
.milestone svg {
  filter: drop-shadow(0 0 8px var(--gantt-danger, #f56c6c));
  animation: milestone-glow 2s ease-in-out infinite alternate;
}

/* 里程碑发光动画 */
@keyframes milestone-glow {
  from {
    filter: drop-shadow(0 0 4px var(--gantt-danger, #f56c6c));
  }
  to {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 20px rgba(245, 108, 108, 0.3));
  }
}

/* 悬停时增强发光效果 */
.milestone:hover svg {
  filter: drop-shadow(0 0 16px var(--gantt-danger, #f56c6c))
    drop-shadow(0 0 24px rgba(245, 108, 108, 0.4));
  animation: milestone-glow-intense 1.5s ease-in-out infinite alternate;
}

@keyframes milestone-glow-intense {
  from {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 20px rgba(245, 108, 108, 0.4));
  }
  to {
    filter: drop-shadow(0 0 20px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 32px rgba(245, 108, 108, 0.6));
  }
}

.milestone-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--gantt-text-primary, #222);
  white-space: nowrap;
  z-index: 10; /* 确保标签在上层 */
}

.milestone-label-right {
  margin-left: 5px;
  align-self: center;
}

/* 粘性标签的特殊样式 */
.milestone-label[style*='position: absolute'] {
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(245, 108, 108, 0.2);
  backdrop-filter: blur(4px);
}

/* 火箭emoji样式 */
.rocket-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

/* 火箭emoji悬停效果 */
.milestone:hover .rocket-emoji {
  transform: rotate(-45deg) scale(1.1);
}

/* 暗黑模式下的适配 */
:global(html[data-theme='dark']) .milestone-label {
  color: var(--gantt-text-white, #ffffff) !important;
}

/* 暗黑模式下的粘性标签样式 */
:global(html[data-theme='dark']) .milestone-label[style*='position: absolute'] {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: rgba(246, 124, 124, 0.3) !important;
  color: #ffffff !important;
}

:global(html[data-theme='dark']) .milestone svg {
  filter: drop-shadow(0 0 8px var(--gantt-danger, #f67c7c));
  animation: milestone-glow-dark 2s ease-in-out infinite alternate;
}

:global(html[data-theme='dark']) .milestone:hover svg {
  filter: drop-shadow(0 0 16px var(--gantt-danger, #f67c7c))
    drop-shadow(0 0 24px rgba(246, 124, 124, 0.4));
  animation: milestone-glow-intense-dark 1.5s ease-in-out infinite alternate;
}

/* 暗黑模式发光动画 */
@keyframes milestone-glow-dark {
  from {
    filter: drop-shadow(0 0 4px var(--gantt-danger, #f67c7c));
  }
  to {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 20px rgba(246, 124, 124, 0.3));
  }
}

@keyframes milestone-glow-intense-dark {
  from {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 20px rgba(246, 124, 124, 0.4));
  }
  to {
    filter: drop-shadow(0 0 20px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 32px rgba(246, 124, 124, 0.6));
  }
}

/* 拖拽状态样式 */
.milestone.dragging {
  z-index: 1000;
  opacity: 0.8;
  transform: scale(1.1);
  cursor: grabbing;
}

.milestone.dragging svg {
  filter: drop-shadow(0 0 20px var(--gantt-danger, #f56c6c))
    drop-shadow(0 0 32px rgba(245, 108, 108, 0.6));
  animation: none;
}

:global(html[data-theme='dark']) .milestone.dragging svg {
  filter: drop-shadow(0 0 20px var(--gantt-danger, #f67c7c))
    drop-shadow(0 0 32px rgba(246, 124, 124, 0.6));
}

/* 停靠状态的特殊样式 */
.milestone-sticky svg {
  z-index: 150;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-sticky-left svg {
  animation: milestone-glow-sticky 3s ease-in-out infinite alternate;
}

.milestone-sticky-right svg {
  animation: milestone-glow-sticky 3s ease-in-out infinite alternate;
}

/* 半图标显示时取消发光效果 */
.milestone-sticky-left svg[style*='clip-path'],
.milestone-sticky-right svg[style*='clip-path'] {
  animation: none;
  filter: none;
}

@keyframes milestone-glow-sticky {
  from {
    filter: drop-shadow(0 0 6px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 12px rgba(245, 108, 108, 0.4));
  }
  to {
    filter: drop-shadow(0 0 10px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 20px rgba(245, 108, 108, 0.6));
  }
}

/* 暗黑模式下的停靠状态样式 */
:global(html[data-theme='dark']) .milestone-sticky-left svg,
:global(html[data-theme='dark']) .milestone-sticky-right svg {
  animation: milestone-glow-sticky-dark 3s ease-in-out infinite alternate;
}

/* 暗黑模式下半图标显示时取消发光效果 */
:global(html[data-theme='dark']) .milestone-sticky-left svg[style*='clip-path'],
:global(html[data-theme='dark']) .milestone-sticky-right svg[style*='clip-path'] {
  animation: none;
  filter: none;
}

@keyframes milestone-glow-sticky-dark {
  from {
    filter: drop-shadow(0 0 6px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 12px rgba(246, 124, 124, 0.4));
  }
  to {
    filter: drop-shadow(0 0 10px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 20px rgba(246, 124, 124, 0.6));
  }
}

/* 半图标显示效果 - 优化clip-path过渡 */
.milestone-sticky svg[style*='clip-path'] {
  transition:
    clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.3s ease-in-out;
}

/* 左侧停靠的半图标效果增强 */
.milestone-sticky-left svg[style*='clip-path'] {
  transform-origin: 100% 50%; /* 右侧为缩放原点 */
}

/* 右侧停靠的半图标效果增强 */
.milestone-sticky-right svg[style*='clip-path'] {
  transform-origin: 0% 50%; /* 左侧为缩放原点 */
}

/* 半图标悬停效果 */
.milestone-sticky svg[style*='clip-path']:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 18px var(--gantt-danger, #f56c6c))
    drop-shadow(0 0 30px rgba(245, 108, 108, 0.8));
}

.milestone-sticky.milestone-pushing svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px var(--gantt-danger, #f56c6c))
    drop-shadow(0 0 25px rgba(245, 108, 108, 0.7));
}

/* 停靠状态的增强发光效果 */
.milestone-sticky-left svg,
.milestone-sticky-right svg {
  animation: milestone-glow-sticky-enhanced 2s ease-in-out infinite alternate;
}

@keyframes milestone-glow-sticky-enhanced {
  from {
    filter: drop-shadow(0 0 8px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 16px rgba(245, 108, 108, 0.5));
  }
  to {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 24px rgba(245, 108, 108, 0.7)) drop-shadow(0 0 32px rgba(245, 108, 108, 0.3));
  }
}

/* === Milestone Tooltip 样式 === */
.milestone-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 10000; /* 确保在最上层 */
  max-width: 300px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.milestone-tooltip .tooltip-content {
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
}

/* 暗黑模式下的Tooltip样式 */
:global(html[data-theme='dark']) .milestone-tooltip {
  background: rgba(30, 30, 30, 0.95) !important;
  color: #ffffff !important;
}

/* 推挤状态的视觉增强 */
.milestone-pushing {
  animation: milestone-pushing-pulse 0.6s ease-in-out;
}

@keyframes milestone-pushing-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 20px rgba(245, 108, 108, 0.6));
  }
  100% {
    transform: scale(1);
  }
}

/* 推挤动画效果 - 被推出边界的里程碑 */
.milestone-pushed-out {
  opacity: 0;
  transform: scale(0.6) translateY(-10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 停靠状态的交互提示 */
.milestone-sticky svg:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* 停靠状态下的点击提示 */
.milestone-sticky svg:active {
  transform: scale(0.95);
}
</style>
